
<template>
	<div class="home">
		<header>
			<div class="search">
				<input type="text" placeholder="请搜索数据" />
			</div>
			<div class="menu-list">
				<div class="wrapper">
					<ul>
						<li v-for="(v, i) in menuList" :key="i" :class="i === activeIndex ? 'active' : ''" @click="activeIndex = i">
							{{
									v.title
							}}</li>
					</ul>
				</div>
				<!--  -->
				<b @click="visible = true">图标</b>
			</div>
		</header>

		<main>
			<component :is="menuList[activeIndex].component" />

		</main>
		<Popel :visible="visible">
			<Button :type="i === activeIndex ? 'danger' : 'primary'" v-for="(v, i) in menuList" :key="i"
				@click="activeIndex = i; visible = false">{{ v.title
				}}</Button>
		</Popel>
	</div>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent, onMounted } from 'vue'
import Popel from '@/components/pople/indexView.vue'
import Button from '@/components/button/indexView.vue'
import BetterScroll from 'better-scroll'
const menuList = [{
	title: "推荐",
	component: defineAsyncComponent(() => import('@/components/commend/indexView.vue'))
}, {
	title: "本地",
	component: defineAsyncComponent(() => import('@/components/local/indexView.vue'))
}, {
	title: "新车",
	component: defineAsyncComponent(() => import('@/components/newCar/indexView.vue'))
}, {
	title: "原创"
}, {
	title: "视频看车"
}, {
	title: "导购"
}, {
	title: "行业"
}, {
	title: "SUV"
}, {
	title: "新能源"
}, {
	title: "试驾测评"
}, {
	title: "自驾游"
}, {
	title: "越野"
}, {
	title: "改装"
}, {
	title: "提车作业"
}, {
	title: "摩托车"
}];
const activeIndex = ref(0)
const visible = ref(false)

onMounted(() => {
	const bs = new BetterScroll('.wrapper', {
		scrollX: true,
		observeDOM: true, // 开启 observe-dom 插件
		click: true
	})
})
</script>

<style lang="scss" scoped>
.home {
	display: flex;
	flex-direction: column;
	height: 100%;

	header {
		height: 100px;
		position: relative;
		z-index: 3;

		.search {
			height: 50px;
			padding: 4px;

			input {
				width: 100%;
				height: 100%;
			}
		}

		.menu-list {
			height: 50px;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 99;

			.wrapper {
				white-space: nowrap;
				flex: 1;
				overflow: hidden;
				ul {
					display: inline-block;

					li {
						flex-shrink: 0;
						margin: 0 4px;
						display: inline-block;

						&.active {
							color: red;
						}
					}
				}
			}
		}
	}

	main {
		flex: 1;
		height: 100%;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}
}
</style>